<template>
  <div class="dashboard-container">
    <el-card class="table-wrapper">
      <el-button
        type="success"
        icon="el-icon-edit"
        class="button"
        @click="add"
      >
        成功按钮
      </el-button>
      <el-alert
        :title="'共'+ companysList.counts + '条记录'"
        type="info"
        show-icon
        class="record"
      >
      </el-alert>
      <my-table
          :table-props="{
            data: companysList.items,
            border: true
          }"
          :columns="[
            { label: '序号', prop: 'id', width: 100, align: 'center' },
            { label: '企业编号', prop: 'number', width: 200, align: 'center' },
            { label: '企业简称', prop: 'company', width: 150, align: 'center' },
            { label: '标签', prop: 'tags', width: 150, align: 'center' },
            { label: '创建者', prop: 'creatorID', width: 150, align: 'center' },
            { label: '创建日期', prop: 'addDate', width: 300, align: 'center' },
            { label: '备注', prop: 'remarks', width: 300, align: 'center' },
            { label: '状态', prop: 'state', width: 100, align: 'center' },
            { label: '操作', slotName: 'operators', width: 300, align: 'center' }, // 带插槽
          ]"
          :pagination-props="{
            layout: 'total, pager',
            total: companysList.counts
          }"
          :pagination-events="events"
        >
          <template v-slot:operators="scope">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="danger" @click="deleteUser(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </my-table>
    </el-card>
    <!-- 新增用户对话框 -->
    <el-dialog
      title="创建用户"
      :visible.sync="addUserVisible"
      width="30%"
      @close="onAddEmployeeClose"
    >
      <el-form
        :model="addUser"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="120px"
        class="demo-ruleForm"
        style="width: 100%; margin-left: 10px;"
      >
        <el-form-item
          label="企业名称"
          prop="number"
        >
          <el-input
            type="text"
            v-model="addUser.number"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="所属公司"
            prop="company"
        >
          <el-input
            type="text"
            v-model="addUser.company"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="方向(企业标签)"
            prop="tags"
        >
          <el-input
            type="text"
            v-model="addUser.tags"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remarks"
        >
          <el-input
            type="textarea"
            v-model="addUser.remarks"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onAddEmployeeClose">取 消</el-button>
        <el-button type="primary" @click="onAddEmployeeOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import * as companysApi from '@/api/hmmm/companys';
export default {
  name: 'CompanysList',
  data () {
    const validateNull = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error(this.$t('值不能为空')))
      } else {
        callback()
      }
    }
    return {
      addUserVisible: false,
      currentPage: 1,
      pageSize: 10,
      events: {
        'current-change': this.onCurrentPageChange
      },
      addUser: {
        number: '',
        company: '',
        tags: '',
        remarks: '',
      },
      addFormRules: {
        number:[{ required: true, trigger: 'blur', validator: validateNull }],
        company:[{ required: true, trigger: 'blur', validator: validateNull }],
        tags:[{ required: true, trigger: 'blur', validator: validateNull }],
        remarks:[{ required: true, trigger: 'blur', validator: validateNull }],
      }
    }
  },
  computed: {
    ...mapState('companys', [
      'companysList'
    ])
  },
  methods: {
    ...mapActions('companys', [
      'updatecompanysList'
    ]),
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updatecompanysList({
        page: this.currentPage,
        size: this.pageSize,
      });
    },
    deleteUser(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
        companysApi.deleteUse({
          id: row.id
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.updatecompanysList({
              page: this.currentPage,
              size: this.pageSize,
            })
          })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add() {
      this.addUserVisible = true
    },
    onAddEmployeeClose() {
      this.addUserVisible = false
    },
    onAddEmployeeOk() {
      // await companysApi.add(this.addUser)
      //   .then(msg => this.$message.success(msg))
      //   .catch(msg => this.$message.error(msg))
      // this.addUserVisible = false
      // this.updatecompanysList({
      //   page: this.currentPage,
      //   size: this.pageSize,
      // });
    }
  },
  async created() {
    await this.updatecompanysList({
      page: this.currentPage,
      size: this.pageSize,
    });
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 16px;

  .right {
    padding-left: 30px;
  }
  .button {
    float: right;
  }
  .record {
    margin-bottom: 12px;
  }
}
</style>
